<template>
  <div class="common-page f-c">
    <el-form inline>
      <el-form-item label="课程类型">
        <el-select v-model="searchParams.category_id" filterable placeholder="可搜索选择" @change="changeCategory">
          <el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-select v-model="searchParams.course_id" filterable placeholder="可搜索选择">
          <el-option v-for="item in courseList" :key="item.id" :value="item.id" :label="item.course_name" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left: 15px" @click="onSearch">搜索</el-button>
        <el-button type="primary" style="margin-left: 15px" @click="onReset">清除</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <el-table
        v-loading="loading"
        style="width: 100%"
        height="100%"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
                <el-table-column label="操作" fixed="right" width="120px">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      style="color: #0DB493"
                      @click="onView(scope.row)"
                    > 查看学生明细
                    </el-button>
                  </template>
                </el-table-column>
      </el-table>
    </div>
    <el-dialog title="学生列表" :visible.sync="show" width="600px">
      <el-table
        style="width: 100%"
        height="300px"
        stripe
        :data="studentList"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column
          v-for="item in columns2"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http } from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'Page',
  computed: {
    ...mapGetters(['schoolList', 'courseList', 'classList', 'categoryList'])
  },
  mixins: [crud],
  data() {
    return {
      request: http.course_start,
      searchParams: {
        category_id: '',
        course_id: ''
      },
      columns: [
        { prop: 'category.name', label: '课程类型' },
        { prop: 'course.course_name', label: '课程名称' },
        { prop: 'teacher.teacher_name', label: '老师姓名' },
        { prop: 'count', label: '已选人数' },
        { prop: 'total', label: '总人数' },
        { prop: 'created_at', label: '创建时间' }
      ],
      columns2: [
        { prop: 'number', label: '学号' },
        { prop: 'student_name', label: '学生姓名' },
      ],
      courseList: [],
      show: false,
      studentList: []
    }
  },
  created() {
    http.teacher.list().then(res => {
      this.teacherList = res
    })
  },
  methods: {
    formatTableData(tableData) {
      tableData.forEach(el => {
        el.category = this.categoryList.find(el2 => el.category_id === el2.id)
        el.count = el.CourseStudents ? el.CourseStudents.length : 0
      })
    },
    changeCategory(val) {
      http.course.list({
        category_id: val
      }).then(res => {
        this.courseList = res
      })
    },
    onView(item) {
      this.show = true
      http.student.list({
        ids: item.CourseStudents.map(el => el.student_id).join(',')
      }).then(res => {
        console.log(res)
        this.studentList = res
      })
    }
  }
}
</script>

<style scoped lang="scss">
.common-page {
  height:  100%;
}
</style>
